<template>
  <div>
    <el-steps :active="active" style="" v-bind="$attrs" v-on="$listeners" >
      <el-step title="生产开工"/>
      <el-step title="打印输出"/>
      <el-step title="输出分拣"/>
      <el-step :title="isDoubleSide ? '工厂前台扫描' : '输出分拣'"/>
      <el-step :title="isCover ? '封面制作' : '内页册成册'"/>
      <el-step :title="isCover ? '封面质检' : '半成品质检'" />
      <el-step title="产品合册"/>
      <el-step title="产品装封面"/>
      <el-step :title="isDoubleSide ? '内页册产品分拣' : '产品分拣'"/>
      <el-step title="包装发货"/>
    </el-steps>
  </div>
</template>

<script>
  export default {
    name: 'ProductionSteps',
    props: {
      active: {
        type: Number
      },
      isDoubleSide: {
        type: Boolean,
        default: true
      },
      testFn: {
        type: Function
      },
      isCover:{
        type: Boolean,
        default: true
      }
    },
    created() {
      // this.$on('azure',(payLoad)=>{
      //   console.log(`~~~myself ${this.$options.name}`);
      //   console.log(payLoad);
      // })

      this.onInput('azure search keyword')
    },
    methods: {
      onInput(key) {
        this.testFn && this.testFn(key).then((data) => {
          console.log('get data => ' + data)
          console.log('set data => ')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
